import React, { useEffect, useState } from 'react';
import { Modal, Select } from 'antd';
import CustomDatePicker from '@/components/CustomDatePicker';
import HistoryLineChart from './HistoryLineChart';
import style from '@/pages/IndexPage.css';
const { Option } = Select;

let data = [];
data.push({ key:0, title:'冷冻进水温度', value:24.3, unit:'℃', time:'2023-10-01 13:30:30'})
data.push({ key:0, title:'冷冻出水温度', value:26.1, unit:'℃', time:'2023-10-01 13:30:30'})
data.push({ key:0, title:'冷却进水温度', value:21.8, unit:'℃', time:'2023-10-01 13:30:30'})
data.push({ key:0, title:'冷却出水温度', value:19.4, unit:'℃', time:'2023-10-01 13:30:30'})
data.push({ key:0, title:'运行时间', value:1.2, unit:'h', time:'2023-10-01 13:30:30'})
data.push({ key:0, title:'过冷度', value:25.1, unit:'℃', time:'2023-10-01 13:30:30'})
data.push({ key:0, title:'过热度', value:32.1, unit:'℃', time:'2023-10-01 13:30:30'})



let infoList = [
    { title:'本月', children:[{ text:'最大值', value:6312, unit:'', subText:'03-15'  }, { text:'最小值', value:3642, unit:'', subText:'03-15' }, { text:'平均值', value:3200, unit:'' }] },
    { title:'上月', children:[{ text:'最大值', value:6312, unit:'', subText:'03-15'  }, { text:'最小值', value:3642, unit:'', subText:'03-15' }, { text:'平均值', value:3200, unit:'' }] },
];

function ParamsBoard(){
    const [currentParam, setCurrentParam] = useState({});
    return (
        <div style={{ height:'100%', background:'#fff', padding:'1rem 0 0 1rem' }}>
            {
                data.map((item, index)=>(
                    <div key={index} className={style['card-container-wrapper']} style={{ width:'33.3%', height:'120px' }}>
                        <div className={style['card-container']} style={{ border:'1px solid #e8eaee'}}>
                            <div className={style['card-title']} style={{ backgroundColor:'#f2f3f5' }}>{ item.title }</div>
                            <div className={style['card-content']} style={{ padding:'0 1rem'}}>
                                <div>
                                    <span style={{ fontSize:'2rem', color:'#0b1018', marginRight:'4px' }}>{ item.value }</span>
                                    <span>{ item.unit }</span>
                                </div>
                                <div style={{ fontSize:'0.8rem' }}>
                                    <span style={{ float:'left' }}>{ item.time }</span>
                                    <span style={{ float:'right', color:'#1890ff', cursor:'pointer' }} onClick={()=>setCurrentParam(item)}>查看数据</span>
                                </div>
                            </div>
                        </div>
                    </div>
                ))
            }
            <Modal
                width='54%'
                open={Object.keys(currentParam).length ? true : false }
                onCancel={()=>setCurrentParam({})}
                className={style['custom-modal']}
                footer={null}
                title='螺杆机1#-历史数据'
            >
                <div>
                    <div style={{ height:'90px', display:'flex', alignItems:'center' }}>
                        <Select className={style['custom-select']} style={{ width:'160px', marginRight:'1rem' }} value={0}>
                            {
                                data.map((item,index)=>(
                                    <Option key={item.key} value={item.key}>{ item.title }</Option>
                                ))
                            }
                        </Select>
                        <CustomDatePicker mode='gray' />
                    </div>
                    
                    <div className={style['list-container']} style={{ height:'70px' }}>
                        {
                            infoList.map((item, index)=>(
                                <div 
                                    key={index} 
                                    className={style['list-item']}
                                    style={{ width:`calc( ( 100% - ${infoList.length-1}rem )/${infoList.length} )` }}
                                >
                                    <div className={style['list-item-icon']}>{ item.title }</div>
                                    {
                                        item.children.map((sub, j)=>(
                                            <div key={j} style={{ alignSelf:j === item.children.length - 1 ? 'flex-start' : 'auto' }}>
                                                <div className={style['sub-text']}>{ sub.text }</div>
                                                <div className={style['text']}>{ sub.value }</div>
                                                <div className={style['sub-text']}>{ sub.subText }</div>
                                            </div>
                                        ))
                                    }
                                </div>
                            ))
                        }
                    </div>
                    <div style={{ height:'340px' }}><HistoryLineChart /></div>

                </div>
            </Modal>
        </div>
    )
}

export default ParamsBoard;